<template>
  <view>
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="商城" @clickLeft="back" />
    <view class="container">
      <view class="search_box">
        <view class="search_box_icon">
          <image src="../../static/shop/search.png" mode=""></image>
        </view>
        <input class="search_input" type="text" v-model="goods_name">
        <view class="search_box_btn" @click="searchBtn()">
          搜索
        </view>
      </view>
      <view class="nav_flex">
        <view class="scroll u-flex">
          <view :class="navIndex == 'all' ?'nav_fle_item':'nav_fle_itemb'" @click="changeBtn('all')">
            全部
          </view>
          <view :class="navIndex == index ?'nav_fle_item':'nav_fle_itemb'" v-for="(item,index) in navList" :key="index"
            @click="changeBtn(item,index)">
            {{item.name}}
          </view>
        </view>
      </view>
      <view class="top_banner">

      </view>
    </view>
    <view class="u-flex" style="flex-wrap: wrap;">
      <view class="shop_list" v-for="(item,index) in list" :key="index" @click="openUrl(item)">
        <image :src="item.logo" mode="widthFix"></image>
        <view class="list_title">
          {{item.goods_name}}
        </view>
        <view class="list_prise">
          价格<span>{{item.price}}</span>
        </view>
        <!-- <view class="list_num">
          库存：123
        </view> -->
        <view class="list_button" @click.stop="submitBtn(item)">
          立即购买
        </view>
      </view>
    </view>


  </view>
</template>

<script>
  import {
    goodsList
  } from '@/api/index.js'
  export default {
    data() {
      return {
        img: '../../static/shop/banner.png',
        searchWord: '',
        navList: [],
        navIndex: 'all',
        list: [],
        page: 1,
        cid: '',
        goods_name: ''
      }
    },
    methods: {
      searchBtn() {
        goodsList({
          page: this.page,
          c_id: this.cid,
          goods_name: this.goods_name
        }).then(res => {
          if (res.code == 1) {
            this.list = res.data
          }
        })
      },
      submitBtn(item) {
        this.$ui.push('/pages/shop/mall_payment?id=' + item.id)
      },
      openUrl(item) {
        this.$ui.push('/pages/shop/detail?id=' + item.id)
      },
      changeBtn(item, index) {
        this.$ui.loading('加载中')
        this.navIndex = index
        this.page = 1
        let id = item.id
        if (item == 'all') {
          id = ''
        }
        goodsList({
          page: this.page,
          c_id: id
        }).then(res => {
          if (res.code == 1) {
            this.list = res.data
            uni.hideLoading()
          }
        })
      },
      back() {
        uni.navigateBack()
      }
    },
    onReachBottom() {
      this.page++
      goodsList({
        page: this.page,
        c_id: this.cid,
      }).then(res => {
        if (res.code == 1) {
          this.list = this.list.concat(res.data)
        }
      })
    },
    onLoad() {
      goodsList({
        page: this.page,
        c_id: this.cid,
      }).then(res => {
        if (res.code == 1) {
          this.navList = res.cate_list
          this.list = res.data
        }
      })
    }
  }
</script>

<style lang="less">
  .container {
    position: relative;
    height: 526rpx;
    background-color: #fff;
    overflow: hidden;

    .top_banner {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 319rpx;
      background-image: url(@/static/shop/banner.png);
      background-size: 100% 100%;
    }

    .nav_flex {
      position: relative;
      margin: 28rpx auto 0;
      width: 710rpx;
      height: 50rpx;
      overflow: auto;

      .scroll {
        min-width: 1300rpx;
      }

      .nav_fle_item {
        width: 150rpx;
        position: relative;
        font-size: 27rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;

        &:after {
          position: absolute;
          bottom: 0;
          left: 10rpx;
          content: '';
          width: 30rpx;
          height: 2rpx;
          background: #D2B17C;
        }
      }

      .nav_fle_itemb {
        width: 150rpx;
        position: relative;
        font-size: 25rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }

    .search_box {
      position: relative;
      margin: 44rpx auto 0;
      width: 710rpx;
      height: 66rpx;
      background: #F4F4F4;
      border-radius: 8rpx;

      .search_box_icon {
        position: absolute;
        top: 16rpx;
        left: 20rpx;
        width: 31rpx;
        height: 34rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .search_input {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 80rpx;
      }

      .search_box_btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 140rpx;
        height: 66rpx;
        background: linear-gradient(0deg, #CAAC5D 0%, #E7C573 100%);
        border-radius: 8rpx;
        font-size: 28rpx;
        line-height: 66rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
      }
    }
  }

  .shop_list {
    margin-top: 20rpx;
    margin-left: 19rpx;
    position: relative;
    width: 350rpx;
    height: 520rpx;
    background: #FFFFFF;
    box-shadow: 4rpx 1rpx 15rpx 1rpx rgba(0, 0, 0, 0.08);
    border-radius: 50rpx;

    image {
      position: absolute;
      top: 20rpx;
      left: 30rpx;
      width: 290rpx;
    }

    .list_title {
      position: absolute;
      top: 334rpx;
      left: 30rpx;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    .list_prise {
      position: absolute;
       top: 394rpx;
      left: 30rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;

      span {
        margin-left: 10rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #CBAE5E;
      }
    }

    .list_num {
      position: absolute;
      top: 40rpx;
      right: 40rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    .list_button {
      position: absolute;
      right: 39rpx;
      bottom: 29rpx;
      width: 144rpx;
      height: 54rpx;
      background: linear-gradient(0deg, #CAAC5D 0%, #E7C573 100%);
      border-radius: 26rpx;
      line-height: 54rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      text-align: center;
    }
  }
</style>
